<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贺亮的个人主页</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./style.css">

</head>
<body class="flex column">
<!--标题栏-->
<nav class="navbar navbar-default c1 ">
    <div class="container-fluid ">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand c2" href="#">首 页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a class="c2" href="#">个人简介</a></li>
                <li><a class="c2" href="#">技 能</a></li>
                <li><a class="c2" href="#">关 于</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="clock" class="c2" href="#">现在时间</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--logo-->
<div class="flex center">
    <img style="width:200px;height:130px;border-radius:400px" src="./个人头像.jpg">
</div>
<!--姓名-->
<div style="height:50px; margin-top:28px;" class="flex center name">贺 亮</div>


<!--下半部分盒子-->
<div class="flex flex1 column bottom">
    <!--联系方式-->
    <div class="flex center name">联系方式</div>
    <!--底部图标-->
    <div class="flex tuBiao">
        <div class="flex column">
            <img class="img" src="./联系图标/209电话-圆框.png"/>
            <span class="bottom_font">电话:12345678901</span>
        </div>
        <div class="flex column">
            <img class="img" src="./联系图标/QQ-circle-fill.png"/>
            <spn class="bottom_font">QQ:724588996</spn>
        </div>
        <div class="flex column">
            <img class="img" src="./联系图标/微信.png"/>
            <span class="bottom_font">微信:123456789</span>
        </div>
        <div class="flex column">
            <img class="img" src="./联系图标/邮箱.png"/>
            <span class="bottom_font">邮箱:jsdkfjk@163.com</span>
        </div>
    </div>
</div>

<script src="static/js/jquery-3.6.3.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script>
function showTime(clock){
    var now = new Date();
    var year = now.getFullYear();
    var month= now.getMonth();
    var day = now.getDate();
    var hour = now.getHours();
    var minu = now.getMinutes();
    var second = now.getSeconds();
    month = month+1;
    var arr_work = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
    var week = arr_work[ now.getDay()];
    var time = year+"年"+month+"月"+day+"日 "+ week+" "+hour+":"+minu+":"+second;
    clock.innerHTML= time;
}
window.onload = function(){
    var clock = document.getElementById("clock");
    window.setInterval("showTime(clock)",1000);
}




</script>
</body>
</html>